<template>
 <link rel="stylesheet" href="/assets/css/indent-details.css" />
    <!-- 导航栏 -->
    <van-nav-bar
        title="物流信息"
        left-text="返回"
        left-arrow
        @click-left="back"
        fixed
        z-index="100"
    />
<!-- 引入界面 -->
<div class="near-box">
    <div class="jd-qrdd-bigbox">
        <!--商品地址管理部分-->
        <div class="indent-details-box">
            <span class="indent-details-img1"></span>
            <span class="indent-details-text1">{{info.order.status_text}}</span>
            <span class="indent-details-text2" v-if="info.order.expid" >
                快递公司:{{info.order.express.name}}
                <br/>
                快递单号:{{info.order.expcode}}
            </span>
            <span v-else class="indent-details-text2">
              暂无物流信息
            </span>
        </div>

        <!--address 地址部分 有地址才输出-->
        <div class="jd-qrdd-a1" v-if="info.address">
            <span class="qrdd-a1-t1">{{info.address.consignee}}</span>
            <span class="qrdd-a1-t1">{{info.address.mobile}}</span>
            <span class="qrdd-a1-t2" v-if="info.address.status=='1'">默认</span>

            <div class="qrdd-a1-b1">
                <span class="qrdd-a1-img1"></span>
                <span class="qrdd-a1-t3">{{info.address.region_text}} {{info.address.address}}</span>
            </div>
            <span class="qrdd-a1-img2"></span>
        </div>
    </div>
</div>

<!-- 步进条--> 
<van-steps direction="vertical" :active="0">
     <van-step v-for="item in express">
        <h3>{{item.status}}</h3>
        <p>{{item.time}}</p>
    </van-step>
</van-steps>


</template>
<script>
export default {
    name:'OrderExpress',

    created() {
        // 接收信息
        this.orderid = this.$route.query.orderid ? this.$route.query.orderid : 0
        // console.log(this.orderid);
        
        this.OrderData()
        this.ExpressData()
    },
    data()
        {
        return {
            orderid: 0,
            LoginUser: this.$cookies.get('LoginUser'),
            express: [],//装数据地址
            info: {
            order:{
                express:{}
            },
            address:{},
            product:[],
            contact:''
         }
        }
    },

    methods: {
        back()
        {
            this.$router.go(-1)
        },

        async OrderData()
        {
            // 组转数据
            var data={
                userid:this.LoginUser.id,
                orderid:this.orderid
            }
            var result=await this.$api.OrderInfo(data)

            if(result.code==0)
            {
                //提醒信息
                this.$notify({
                    type:'error',
                    message:result.msg,
                    duration:1000,
                    onClose: () => {
                    //返回上一个界面
                    this.$router.go(-1)
                    }
                })
                return false
            }

            this.info=result.data
            console.log(this.info);
            
        },
        // 查询物流信息
        async ExpressData()
        {
            var data={
                userid:this.LoginUser.id,
                orderid:this.orderid,
            }
            var result =await this.$api.OrderExpress(data);
      
            // console.log(result);
            if(result.code == 0)
            {
            //提醒信息
            this.$notify({
                type:'error',
                message:result.msg,
                duration:1000,
            })

            return false
            }
            this.express=result.data

            // console.log(this.express);
        }
    },
}
</script>

<style>
  .near-box{
    margin-top:4em;
  }
  .jd-qrdd-bigbox{
    margin-bottom:0!important;
    padding-bottom:0;
  }
    .history{
        background:#ffff;
        border-bottom:1px solid #ccc;
    }
</style>